<template>
    <div class="cooperate-container">
        <div class="cooperate-container__inner">
            
                <homepage-title>
                    <div class="header-container__title">高返佣模式的合作方案</div>
                    <div class="header-container__brief">
                        我们提供不同的佣金形式供代理选择，以最大的资金支持代理推广获利
                    </div>
                    <div class="header-container__sub-title">
                        多层佣金，推广会员以及下级代理
                    </div>
                </homepage-title>
        
        <div class="cooperate-container__line"></div>
        <div class="cooperate-container-footer">
            <div class="cooperate-container-footer__center">
                <div class="cooperate-container-footer__bg">
                    <div class="cooperate-container-footer__main">
                        <timeout-cell :time="1600" :iteration="true" class="cooperate-container-footer__title slideInUp">¥8888888</timeout-cell>
                        <timeout-cell :time="1600" :iteration="true" class="cooperate-container-footer__sub-title slideInUp">¥88888</timeout-cell>
                        <timeout-cell :time="1600" :iteration="true" class="cooperate-container-footer__brief slideInUp">¥888</timeout-cell>
                    </div>
                    <timeout-cell :time="1600" :iteration="true" class="slideInRight cooperate-container-footer-cell cooperate-container-footer-cell--first">
                        <div class="cooperate-container-footer-cell__icon">
                            <img src="./img/arrow-left.png" alt="">
                        </div>
                        <div class="cooperate-container-footer-cell__round is-purple"></div>
                        <div class="cooperate-container-footer-cell__text">一级代理</div>
                    </timeout-cell>

                    <timeout-cell :time="1600" :iteration="true" class="slideInRight cooperate-container-footer-cell cooperate-container-footer-cell--second">
                        <div class="cooperate-container-footer-cell__icon">
                            <img src="./img/arrow-left.png" alt="">
                        </div>
                        <div class="cooperate-container-footer-cell__round is-blue"></div>
                        <div class="cooperate-container-footer-cell__text">三层代理</div>
                    </timeout-cell>
                    <timeout-cell :time="1600" :iteration="true" class="slideInLeft cooperate-container-footer-cell cooperate-container-footer-cell--third">
                        <div class="cooperate-container-footer-cell__text">二层代理</div>
                        <div class="cooperate-container-footer-cell__round is-blue"></div>
                        <div class="cooperate-container-footer-cell__icon"><img src="./img/arrow-right.png" alt=""></div>

                    </timeout-cell>
                </div>

            </div>
        </div>
        </div>
    </div>
</template>


<script>
export default {
  name: "cooperate"
};
</script>

<style lang="scss" scoped>
$--font-family: "MicrosoftYaHeiUI";
@include b(cooperate-container) {
  height: 100%;
  background: #ffffff;
  // @include e(inner) {
  //   height: 100%;
  //    display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   flex-flow: column;
  // }
  @include e(line) {
    width: 100%;
    height: 371px;
    @include utils-bg(url("./img/cooperate-line.png") no-repeat);
  }
  @include b(cooperate-container-footer) {
    display: flex;
    justify-content: center;
    @include e(center) {
      position: relative;

      @include e(bg) {
        width: 505px;
        height: 410px;

        @include utils-bg(url("./img/cooperate-bottom.png") no-repeat);
        position: relative;
      }
      @include e(main) {
        display: flex;
        justify-content: center;
        flex-flow: column;
        align-items: center;
      }
      @include e(title) {
        font-size: 80px;
        font-family: $--font-family;
        font-weight: 400;
        color: #d52a86;
        position: absolute;
        top: -80px;
      }
      @include e(sub-title) {
        font-size: 64px;
        font-family: $--font-family;
        font-weight: 400;
        color: #ffffff;
        margin-top: 125px;
      }
      @include e(brief) {
        font-size: 48px;
        font-family: $--font-family;
        font-weight: 400;
        color: #ffffff;
        margin-top: 17px;
      }

      @include b(cooperate-container-footer-cell) {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 263px;
        @include m(first) {
          top: 30px;
          left: 93%;
        }
        @include m(second) {
          bottom: 84px;
          left: 70%;
        }
        @include m(third) {
          top: 50%;
          margin-top: -23px;
          left: -30%;
        }
        @include e(text) {
          font-size: 20px;
          font-family: $--font-family;
          font-weight: 400;
          color: #696b81;
        }
        @include e(round) {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: #bb68fb;
          @include when(purple) {
            background: #bb68fb;
          }
          @include when(blue) {
            background: #1e5adc;
          }
        }
      }
    }
  }
}
</style>
